<template>
  <div>
    <template v-if="UserList.length == 0">
      <div class="nouser">你还没有浏览过其他人</div>
    </template>
    <template v-else>
      <div v-for="users in UserList" :key="users.uid" class="bian">
        <div class="userstyle">
          <!-- 头像 -->
          <img :src="users.image" alt="" @click="getUserDetails(users.uid)" />
          <!-- 用户名 -->
          <span @click="getUserDetails(users.uid)">{{ users.name }}</span>
        </div>
      </div>
    </template>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :hide-on-single-page="true"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {findHistory_user} from "../../../api/history"
export default {
  name:"History_user",
  data() {
    return {
      UserList: [],
      query: {
        pageNum: 1,
        pageSize: 10,
        beuid: localStorage.getItem("uid"),
      },
      pageTotal: 0,
      isShow: true,
    };
  },
  created() {
    this.getUserAttention();
  },
  methods: {
    getUserAttention() {
      findHistory_user(this.query).then((res) => {
        // console.log(res);
        this.UserList = res.data.list;
        // 分页数据
        this.pageTotal = res.data.total;
      });
    },
    handlePageChange(val) {
      this.$set(this.query, "pageNum", val);
      this.getUserAttention();
    },
    //用户详情
    getUserDetails(uid) {
      localStorage.setItem("otherUid", uid)
      this.$router.push("/otheruserpage")
    },
  },
};
</script>
<style scoped>
.nouser {
  height: 100px;
  font-size: 15px;
  color: #a4b0be;
  text-align: center;
  line-height: 100px;
}
.bian {
  border-bottom: solid 1px #f0f0f0;
}
.userstyle {
  position: relative;
  margin: 10px 30px;
}
.userstyle > img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  display: inline-block;
  vertical-align: middle;
}
.userstyle > span {
  margin-left: 20px;
  display: inline-block;
  font-size: 20px;
  color: black;
  vertical-align: middle;
}
</style>
